<template>
  <div class="client-menu" @touchmove.stop.prevent>
    <ul class="item-list">
      <li class="item" :class="{'disable': !client.mobile_num}">
        <i class="link-ico call" :class="{'call-disable': !client.mobile_num}"></i>
        <a class="item-link" :href="'tel:' + client.mobile_num" v-if="client.mobile_num">电话联系</a>
        <span class="item-link" v-if="!client.mobile_num">电话联系</span>
      </li>
      <li class="item">
        <i class="link-ico add-follow"></i>
        <router-link
        class="item-link"
        :to="{path: 'add-follow',
        query: {id: client.id, custom_type: custom_type, suid: client.suid, type: 'GH#', custom_property: client.custom_property}}">写跟进</router-link>
      </li>
      <li class="item" @click.stop="toggleMore()">
        <i class="link-ico more"></i>
        <span class="item-link">更多</span>
      </li>
    </ul>
    <transition>
      <div class="hidden-menu follow" v-if="showFollow">
        <ul class="hidden-menu-list">
          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <router-link :to="{path: 'add-follow', query: {id: client.id, custom_type: custom_type, suid: client.suid, type: 'GH#'}}">关怀</router-link>
          </li>
          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <router-link :to="{path: 'add-follow', query: {id: client.id, custom_type: custom_type, suid: client.suid, type: 'YY#'}}">预约</router-link>
          </li>
          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <router-link :to="{path: 'add-follow', query: {id: client.id, custom_type: custom_type, suid: client.suid, type: 'DF#'}}">到访</router-link>
          </li>
          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <router-link :to="{path: 'add-follow', query: {id: client.id, custom_type: custom_type, suid: client.suid, type: 'FS#'}}">首次签约</router-link>
          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <router-link :to="{path: 'add-follow', query: {id: client.id, custom_type: custom_type, suid: client.suid, type: 'XB#'}}">续报签约</router-link>
          </li>
        </ul>
      </div>
    </transition>
    <transition>
      <div class="hidden-menu" v-if="show">
        <ul class="hidden-menu-list">
          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <span @click="show = false" class="">取消</span>
          </li>
          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <span @click="menuItemSelected({to: {path: 'backToClientSeas'}})" class="">退回企业公海</span>
          </li>
          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <span @click="menuItemSelected({to: {path: 'assignToTeam'}})" class="">退回团队公海</span>
          </li>

          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <span @click="menuItemSelected({to: {path: 'assign'}})" class="">更换负责人</span>
          </li>

          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <span @click="menuItemSelected({to: {path: 'remind'}})" class="">提醒</span>
          </li>
          <li class="hidden-menu-item">
            <i class="hidden-menu-ico"></i>
            <router-link
              :to="{
                path:'edit-normal-client',
                query: {
                  id: client.id,
                  custom_type:custom_type,
                  suid: client.suid
                  }
                }"
              class="img-wrapper">编辑</router-link>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
  var zepto = require('npm-zepto')
  import {showDialog, hideDialog} from '../lib/dialog'

  export default {

    props: {
      itemList: {
        type: Array,
        require: true
      },
      client: {
        type: Object
      },
      custom_type: {
        type: Number | String
      }
    },

    methods: {
      hideDialog: hideDialog,
      menuItemSelected (item) {
        this.show = false
        this.$emit('select-menu', item)
      },
      clickHandler () {
        if (this.showFollow === true) {
          this.showFollow = false
        }
        if (this.show === true) {
          this.show = false
        }
      },
      toggleFollow () {
        this.show = false
        this.showFollow = !this.showFollow
      },
      toggleMore () {
        this.showFollow = false
        this.show = !this.show
      }
    },
    watch: {
      showFollow (value) {
        if (value === true) {
          setTimeout(() => {
            const app = document.getElementById('app')
            app.addEventListener('click', this.clickHandler)
          })
        }
      },
      show (value) {
        if (value === true) {
          setTimeout(() => {
            const app = document.getElementById('app')
            app.addEventListener('click', this.clickHandler)
          })
          this.$emit('on-show', true)
        } else {
          this.$emit('on-hide', false)
        }
      }
    },
    components: {
    },

    mounted () {
      let Clipboard = window['Clipboard']
      let cpQQClipb = new Clipboard('#copyQQNum')
      let cpWechatClipb = new Clipboard('#copyWechatNum')

      cpQQClipb.on('success', (e) => {
        showDialog('复制QQ号码' + this.client.qq_num + '成功！')
      })
      cpQQClipb.on('errors', (e) => {
        showDialog('复制QQ号码' + this.client.qq_num + '失败！')
      })

      cpWechatClipb.on('success', (e) => {
        showDialog('复制微信号码' + this.client.wechat_num + '成功！')
      })
      cpWechatClipb.on('errors', (e) => {
        showDialog('复制微信号码' + this.client.wechat_num + '失败！')
      })
      zepto(this.$parent.$el).on('click.menu', this.clickHandler)
    },
    destroyed () {
      zepto(this.$parent.$el).unbind('click.menu')
    },
    data () {
      return {
        show: false,
        showFollow: false
      }
    }
  }
</script>

<style lang="less">
    @import '../less/base.less';

    .client-menu {
      width: 100%;
      background-color: white;
      @item-size: 50px;
      position: relative;

      .grey {
        color: #999999;
      }

      .hidden-menu {
        position: absolute;
        z-index: 2;
        right: 0;
        padding-bottom: 53px;
        bottom: 0;
        width: 25%;
        -webkit-box-shadow:0 0px 3px rgba(0, 0, 0, 0.3);
        -moz-box-shadow:0 0px 3px rgba(0, 0, 0, 0.3);
        box-shadow:0 0px 3px rgba(0, 0, 0, 0.3);
        background-color: white;

        &.follow {
          left: 38%;
        }
      }

      .hidden-menu-list {
        padding-top: 6px;

        &>* {
          list-style: none;
          color: #01AAEE;
          text-align: center;
          border-top-left-radius: 6px;
          border-bottom: 1px solid #F7F7F7;
        }

        & a, & span{
          display: block;
          color: #01AAEE;
          padding:10px 0px;
        }
      }

      .item-list {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 3;
        width: 100%;
        display: flex;
        border-top: 1px solid #eee;
        background-color: white;

        li.item {
          flex: 1;

          height: @item-size;
          line-height: @item-size;

          text-align: center;
          list-style: none;

          &>*{
            vertical-align: middle;
          }

          &.disable .item-link {
            color: lightgrey;
          }
        }


        .item-link{
          display: inline-block;
          color: #01AAEE;
        }

        li.item:not(:first-child) {
          // border-left: 1px solid #eee;;
        }
      }

      .link-ico {
        @size: 20px;
        width: @size;
        height: @size;
        display: inline-block;
        font-style: normal;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;

        &.call {
          background-image:  url("@{QINIU_STATIC}/menu_userinfo_tel.png");
        }
        &.call-disable {
          background-image:  url("@{QINIU_STATIC}/menu_userinfo_tel_hover.png");
        }

        &.add-follow {
          background-image:  url("@{QINIU_STATIC}/menu_userinfo_follow.png");
        }

        &.more {
          background-image:  url("@{QINIU_STATIC}/menu_userinfo_more.png");
        }

        &.add-label {
          background-image:  url("@{QINIU_STATIC}/icon_add_label.png");
        }
      }

    }
</style>
